<template>
	<div>
        <mj-title type="h2" title="Drawer 抽屉"></mj-title>
        <div class="page-desc">抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<mj-radio-group :data="radioData" v-model="groupValue"></mj-radio-group>
            	<mj-button type="primary" @click="open1">Open</mj-button>
				<mj-drawer :visible.sync='show1' :direction="groupValue">
					<mj-list :data='data1'></mj-list>
				</mj-drawer>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-radio-group :data="radioData" v-model="groupValue">&lt;/mj-radio-group>
						&lt;mj-button type="primary" @click="open1">Open&lt;/mj-button>
						&lt;mj-drawer :visible.sync='show1' :direction="groupValue">
							&lt;mj-list :data='data1'>&lt;/mj-list>
						&lt;/mj-drawer>
					&lt;/template>
					&lt;script>
					export default {
						data () {
							return {
								show1:false,
								groupValue:'right',
							}
						},
						methods: {
							open1() {
								this.show1 = true
							},
						}
					}
					&lt;/script>
					</code>
				</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="自定义footer"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
            	<mj-button type="primary" @click="open2">Open</mj-button>
				<mj-drawer
					title="自定义标题"
					:visible.sync='show2'
					:footerShow='true'
					@open="drawerOpen"
					@close="drawerClose">
					<mj-list :data='data1'></mj-list>
					<div slot="footer">
						<mj-button type="primary" @click="submit">submit</mj-button>
						<mj-button type="text" @click="cancel">cancel</mj-button>
					</div>
				</mj-drawer>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-button type="primary" @click="open2">Open&lt;/mj-button>
						&lt;mj-drawer
							title="自定义标题"
							:visible.sync='show2'
							:footerShow='true'
							@open="drawerOpen"
							@close="drawerClose">
							&lt;mj-list :data='data1'>&lt;/mj-list>
							&lt;div slot="footer">
								&lt;mj-button type="primary" @click="submit">submit&lt;/mj-button>
								&lt;mj-button type="text" @click="cancel">cancel&lt;/mj-button>
							&lt;/div>
						&lt;/mj-drawer>
					&lt;/template>
					&lt;script>
					export default {
						data () {
							return {
								show2:false
							}
						},
						methods: {
							open2() {
								this.show2 = true
							},
							drawerOpen(){
								console.log('抽屉打开')
							},
							drawerClose(){
								console.log('抽屉关闭')
							},
							submit(){
								this.show2 = false
							},
							cancel(){
								this.show2 = false
								this.$msg('关闭抽屉')
							}
						}
					}
					&lt;/script>
					</code>
				</pre>
            </mj-tab-pane>
        </mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Drawer 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>visible.sync</td>
					<td>是否显示 Dialog，支持 .sync 修饰符</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>loading </td>
					<td>是否显示 加载图标，支持 .sync 修饰符</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>loadingColor</td>
					<td>加载图标颜色</td>
					<td>String</td>
					<td>#409EFF</td>
				</tr>
				<tr>
					<td>title</td>
					<td>标题名称</td>
					<td>String</td>
					<td>标题</td>
				</tr>
				<tr>
					<td>headerShow</td>
					<td>标题头部是否显示</td>
					<td>Boolean</td>
					<td>true</td>
				</tr>
				<tr>
					<td>header-background</td>
					<td>标题头部背景颜色</td>
					<td>String</td>
					<td>#fff</td>
				</tr>
				<tr>
					<td>closeBtnShow</td>
					<td>是否显示右上角的关闭按钮</td>
					<td>Boolean</td>
					<td>true</td>
				</tr>
				<tr>
					<td>title-color</td>
					<td>标题颜色</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>main-background</td>
					<td>内容背景色</td>
					<td>String</td>
					<td>#fff</td>
				</tr>
				<tr>
					<td>footerShow</td>
					<td>是否显示底部footer</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>footer-background</td>
					<td>底部背景颜色</td>
					<td>String</td>
					<td>#fff</td>
				</tr>
				<tr>
					<td>width</td>
					<td>侧栏宽度(direction为right,left生效)</td>
					<td>String</td>
					<td>500px</td>
				</tr>
				<tr>
					<td>height</td>
					<td>侧栏高度(direction为top,bottom生效) </td>
					<td>String</td>
					<td>300px</td>
				</tr>
				<tr>
					<td>direction</td>
					<td>抽屉的方向，可选值为 left、right、top、bottom</td>
					<td>String</td>
					<td>right</td>
				</tr>
				<tr>
					<td>mask</td>
					<td>是否显示遮罩层</td>
					<td>Boolean</td>
					<td>true</td>
				</tr>
				<tr>
					<td>close-on-click-mask</td>
					<td>是否允许点击遮罩层关闭</td>
					<td>Boolean</td>
					<td>true</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Drawer 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>open</td>
					<td>打开抽屉时触发</td>
					<td>无</td>
				</tr>
				<tr>
					<td>close</td>
					<td>关闭抽屉时触发</td>
					<td>无</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Drawer Slots"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>header</td>
					<td>自定义标题栏</td>
				</tr>
				<tr>
					<td>footer</td>
					<td>自定义底部栏</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
    export default {
        data () {
            return {
            	show1:false,
            	show2:false,
                radioData: [
                    {label: '从左往右开', value: 'left'},
                    {label: '从右往左开', value: 'right'},
                    {label: '从上往下开', value: 'top'},
                    {label: '从下往上开', value: 'bottom'},
                ],
                groupValue:'right',
                loading:true,
				data1:[
					{title:"众芳摇落独暄妍，占尽风情向小园。"},
					{title:"疏影横斜水清浅，暗香浮动月黄昏。"},
				],
            }
        },
        methods: {
            open1() {
            	this.show1 = true
            },
            open2() {
            	this.show2 = true
            },
            drawerOpen(){
            	console.log('抽屉打开')
            },
            drawerClose(){
            	console.log('抽屉关闭')
            },
            submit(){
            	this.show2 = false
            },
            cancel(){
            	this.show2 = false
				this.$msg('关闭抽屉')
            }
        },
    }
</script>